<!DOCTYPE html>
<html>
<head>
  <title>{$microVote.name}</title>
  <meta charset="UTF-8">
  <meta name="viewport" content=" initial-scale=1.0,user-scalable=no" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta content="black" name="apple-mobile-web-app-status-bar-style" />
  <meta name="format-detection" content="telephone=no"/>
  <meta name="viewport" content="width=device-width,  initial-scale=1.0, user-scalable=0, minimum-scale=1.0,  maximum-scale=1.0" />
  <script src="__PUBLIC__/Style/Common/js/GH.1.1.js"></script>
  <script src="__PUBLIC__/Style/Common/js/zepto.min.admin.js"></script>
  <style>
		 input,textarea {
		  outline:none;
		}
    *{
      margin: 0px;
      padding: 0px;
      font-size: 12px;
      font-family:'microsoft yahei','宋体','tahoma',​'arial',​'simsun',​'sans-serif' ;
      color: #444444;
    }
    img{border: none;}
    li{list-style: none;}
    html body{
      max-width:640px;
      margin:0 auto;
      background:#5EB542;
      padding: 0;
    }
    .cle{ clear: both; }
    a{ color: #333333; text-decoration: none; border: none;}
    a:hover{  cursor: pointer; }
    body {
      background: #EEE;
    }
    .fix {
      width: 100%;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 999;
    	transition: top .5s;
    }
    .fix img {
      width: 100%;
        height: 0px;
    }
    .cont-box {
      width: 100%;
      position: fixed;
      z-index: 2;
    	transition: top .5s;
      top: 0;
      left: 0;
    }
    .cont-ul{
      width: 49%;
      float: left;
    }
    .cont-ul li {
      overflow: hidden;
    	width: 100%;
    	background: #fff;
    	position: relative;
    	overflow: hidden;
    }
    .cont-ul li img {
      width: 100%;
    }
    .cont-ul:nth-of-type(2) {
        margin: 0  0 0 5px;
    }
    .clear:after {
      content: "";
      display: block;
      clear: both;
    }
    .cont-ul:nth-of-type(1) li:nth-of-type(2n+1) , .cont-ul:nth-of-type(2) li:nth-of-type(2n+1){
      margin-bottom: 5px;
    }
    
    .dada-box {
      position: fixed;
      z-index: 5;
      /*background: #C7C7C7;*/
      width: 100%;
        left: 0;
        top: 0;
    }
    #dada {
      height: 35px;
      overflow: hidden;
      position: relative;
      /*background: #494949;*/
      z-index: 5;
    }
    #dada ul {
      height: 35px;
      position: absolute;
      width: 100%;
      /*background: #494949;*/
      z-index: 1;
    }
    #dada ul li {
      display: block;
      height: 35px;
      color: #61B847;
      position: relative white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 1em;
      line-height: 35px;
      text-indent: 5px;
    	margin-right: 20px;
    }
    .clear:after {
      content: "";
      display: block;
      width: 100%;
      clear: both;
    }
    .dada-right {
      position: absolute;
			display: block;
			right: 5px;
			top: 6px;
			background: #61B847;
			padding: 4px 10px;
			font-size: 1em;
			color: #fff;
			z-index: 2;
    }
    .dada-bottom  input {
      border: none;
      background: none;
      width: 100px;
      border-bottom: 1px solid #BF2C25;
    	margin-bottom: 10px;
    	font-size:1.2em;
    	color: #fff;
    }
    .dada-bottom {
      padding: 10px 5px;
    	font-size: 1.2em;
    	background-color: #494949;
    	color: #fff;
    }
    .data-bottom p{
        color: #fff;
    }
    .dada-bottom,.form1-submit {
      display: none;
    }
    .cont-ul-div {
	     position: absolute;
    	 bottom: 10px;
    	 left: 0;
    	 width: 100%;
    	 z-index: 5;
    }
    .cont-ul-max {
	     position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
    	 height: 100px;
       z-index: 2;
    	 background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 250, 250, 0)), to(rgba(119, 116, 116, 0.76)));
    }
    .cont-ul-div p {
	     width: 100%;
    	 color: #5EB542;
    	 text-align: center;
    	 margin: 5px 0;
    	 font-weight: bold;
       font-size: 1.2em;
    }
   .cont-ul-div  p.cont-li-sub,.cont-ul-div p.cont-li-sub-hidden {
			color: #fff;
			width: 81px;
			height: 30px;
			line-height: 30px;
			margin: 0 auto;   
   	  position: relative;
   }
   .cont-li-sub span ,.cont-li-sub-hidden span{
	   display: block;
     background: #5EB542;
	   width: 81px;
	   height: 30px;
   	 -webkit-transform: skew(-27deg);
   	 transform: skew(-27deg);
   	 z-index: 1;
   }
   
   .cont-li-sub-hidden span{
	   background: #ccc;
   }
   .cont-li-sub b,.cont-li-sub-hidden b {
	   display: block;
   	 width: 81px;
     height: 30px;
     text-align: center;
   	 color: #fff;
   	 position: absolute;
   	 left: 0;
   	 top: 0;
   	 z-index: 4;
   }
   .cont-li-sub-hidden{
	   display: none;
   }
   .text-white{
       color: #fff !important;
   }

  </style>
  <script>
   $(function(){
	   var ourl="__CONTROLLER__/saveRecord";           
	    var oHeight= window.document.documentElement.clientHeight,
	         oWidth= document.body.width,
	           iNow= 0;
	    if(oHeight=="480"){
	    	oHeight="416";
	    }
	    
       $.ajax({
          type: "POST",
          url: "{:U('Home/MicroVote/getMicroVoteInfo',null,true,true)}",
          data:{sid:$(".sid").eq(0).val(),id:$(".id").eq(0).val()},
          success: function(msg){
        	  for(var i in msg.itemTitle){
              if(i%2==0){
                $(".cont-ul:nth-of-type(1)").append("<li><div class='cont-ul-max'></div><img src='"+msg.itemTitle[i].pic+"'>"+"<div class='cont-ul-div'><input type='hidden' class='"+msg.itemTitle[i].id+"' value="+msg.itemTitle[i].id+"><p>姓名："+msg.itemTitle[i].title+"</p><p>当前票数："+msg.itemTitle[i].num+"</p><p class='cont-li-sub'><span></span><b>立即投票</b></p><p class='cont-li-sub-hidden'><span></span><b>立即投票</b></p></div>"+"</li>");
              }else{
            	  $(".cont-ul:nth-of-type(2)").append("<li><div class='cont-ul-max'></div><img src='"+msg.itemTitle[i].pic+"'>"+"<div class='cont-ul-div'><input type='hidden' class='"+msg.itemTitle[i].id+"' value="+msg.itemTitle[i].id+"><p>姓名："+msg.itemTitle[i].title+"</p><p>当前票数："+msg.itemTitle[i].num+"</p><p class='cont-li-sub'><span></span><b>立即投票</b></p><p class='cont-li-sub-hidden'><span></span><b>立即投票</b></p></div>"+"</li>");
              }
             }
        	    $(".cont-ul").css({
        	        width: (oWidth-5)/2
        	      });
        	      $(".cont-ul:nth-of-type(1) li:nth-of-type(2n+1)").css({
        	        height: (oHeight-5)/2
        	      })
        	      $(".cont-ul:nth-of-type(1) li:nth-of-type(2n+2)").css({
        	        height: (oHeight-5)/2
        	      })
        	      $(".cont-ul:nth-of-type(2) li:nth-of-type(2n+2)").css({
                  height: (oHeight-5)/2
                })
                $(".cont-ul:nth-of-type(2) li:nth-of-type(2n+1)").css({
                  height: (oHeight-5)/2
                })
             

                	 $(".cont-li-sub").bind("tap",function(){		 
                		  var bs=$(this).siblings("input").val();
                		  $(this).siblings(".cont-li-sub-hidden").show();
                		  $(this).hide();
                		  var oIndex=$(this).index();
                         $.ajax({
                               type: "POST",
                               url:  ourl,
                               data:{selected:bs,sid:$(".cid").val(),id:$(".micro_vote_id").val()},
                               success: function(msg){
                                 GH.showMessage(msg.msg);
                                 $.ajax({
                                    type: "POST",
                                    url: "{:U('Home/MicroVote/getMicroVoteInfo',null,true,true)}",
                                    data:{sid:$(".sid").eq(0).val(),id:$(".id").eq(0).val()},
                                    success: function(msg){
                                    	for(var i in msg.itemTitle){
                                    		$('.'+msg.itemTitle[i].id).next().next().html('当前票数：'+msg.itemTitle[i].num)
                                    	}
                                    	$(".cont-li-sub-hidden").hide();
                                    	$(".cont-li-sub").show();
                                    }
                                  })
                               }
                            });
                      });
          
               
          } 
       
       });
       $(document).on("touchmove", function(e) {
              e.preventDefault();
            });
       
       $(".cont-box").on("swipeUp",function(e){
           e.preventDefault();
         if($(".cont-box").height()-oHeight>oHeight*iNow){
             iNow++;
           $(".form-liu").show();
           $(".form1-submit").hide();
           $(".dada-bottom").hide();
           $(".cont-box").css({top: -oHeight*iNow},500,"ease-out");
         }
       })
       $(".cont-box").on("swipeDown",function(e){
           e.preventDefault();
         if(iNow>0){
           iNow--;
           $(".form-liu").show();
           $(".form1-submit").hide();
           $(".dada-bottom").hide();
           $(".cont-box").css({top: -oHeight*iNow},500,"ease-out");
         }
       })
    
           $(".form-liu").on("tap",function(){
               $(".form-liu").hide();
               $(".form1-submit").show();
               $(".dada-bottom").show();
             })
    $(".fix img").height(oHeight+"px");
    $(".fix").on("swipeUp",function(e){
        e.preventDefault();
      $(".fix").css({top:-oHeight},500,"ease-out");
    })


     /*右侧下边切换栏开始*/
        var odada = document.getElementById('dada'),
            odada_ul = odada.getElementsByTagName('ul')[0],
            odada_li = odada.getElementsByTagName('li'),
            baseHeight = odada_li[0].offsetHeight,
            iNoow = 0,
            k = null;
        timek();
        function timek() {
          k = setInterval(function() {
            iNoow++;
            oodada(iNoow)
          }, 3000)
        }
       
        function oodada(index) {
          if (index > odada_li.length - 2) {
            odada_ul.style.top = 0 + 'px'; //拉到第一个
            index = 0;
            iNoow = index;
            baseHeight = odada_li[0].offsetHeight;
            leave();
          }
          $("#dada ul").animate({
            top: -index * baseHeight
          })
        }
        
        leave();
        function leave(){
            var b="{:U('MicroVoteComment/index')}";
            $.ajax({
               type: "POST",
               url: b,
               data:{cid:$(".cid").val(),micro_vote_id:$(".micro_vote_id").val()},
               success: function(msg){
                 $("#dada ul").html("");
                 for(var i in msg) { 
                   $("#dada ul").append("<li>"+msg[i].sender+" 对 "+msg[i].receiver+"说: "+msg[i].content+"</li>");
                 }
               }
            });
        }

       
        $(".form1-submit").on("tap",function(){
        
          var oForms1=$("#forms1").find("input");
         if(oForms1.eq(0).val()!=""&oForms1.eq(1).val()!=""&oForms1.eq(2).val()!=""){
             var data1=$("#forms1").serialize();
             $.ajax({
               type: "POST",
               url:  "{:U('MicroVoteComment/save')}",
               data:data1,
               success: function(msg){
                 GH.showMessage(msg.msg);
                 $(".dada-bottom input").val("");
               }
            });
         }else{
           GH.showMessage("三个内容都需要填写哦~");
         }
        })
   })
  </script>
<body>
<input type="hidden" class="micro_vote_id" name="micro_vote_id" value="{$microVote.id}">
<input type="hidden" class="cid" name="cid" value="{$sid}">
<input type="hidden" class="sid" value="{$microVote.cid}">
<input type="hidden" class="id" value="{$microVote.id}"/>
  <div class="fix">
    <img src="{$microVote.pic}" alt=""></div>

  <div class="dada-box">
    <div id="dada">
      <a href="javascript:;" class="dada-right form-liu">留言</a>
      <a href="javascript:;" class="dada-right form1-submit">提交</a>

      <ul class="clear">
      <li></li>
      </ul>
    </div>
    <form method="post" id="forms1">
    <div class="dada-bottom">
       <input type="hidden" name="micro_vote_id" value="{$microVote.id}">
       <input type="hidden" name="cid" value="{$sid}">
	    <p class="text-white">我是<input type="text" name="sender" value=""></p>
	    <p class="text-white">我想对<input type="text" name="receiver" value=""></p>
	    <p class="text-white">说：<input type="text" name="content" value=""></p>
    </div>
       </form>
  </div>
  <div class="cont-box">
    <ul class="cont-ul clear"></ul>
    <ul class="cont-ul clear" ></ul>
  </div>
  <script>
//   $(function(){
//     if(isWeiXin()){}else{
//            document.write("<style>.inner{margin-top: 20px;}body{line-height:1.6;font-family:'Helvetica Neue',Helvetica,'Microsoft YaHei',Arial,Tahoma,sans-serif;}body,h1,h2,h3,h4{margin:0;}a img{border:0;}body{background-color: #e1e0de;}.page_msg .msg_content h4{font-weight: 400;color: #000000;}.page_msg{text-align:center;}.icon80_smile{background-image: url('');width: 80px;height: 80px;display: inline-block;}</style><div class='page_msg'><div class='inner'><span class='msg_icon_wrp'><i class='icon80_smile'></i></span><div class='msg_content'><h4>请在微信客户端打开链接</h4></div></div></div>");
//          }
//   })
//    function isWeiXin(){
//      var ua = window.navigator.userAgent.toLowerCase();
//      if(ua.match(/MicroMessenger/i) == 'micromessenger'){
//      return true;
//      }else{
//      return false;
//      }
//    }
  </script>
</body>
</html>